<template>
	<view class="page-container">
	  <view class="scan-list-container">
	    <view class="option-btn" @click="changeDelMode">
	      <text v-if="!delMode" style="color:#f5736e;">编辑</text>
	      <text v-else>完成</text>
	    </view>
	    <view class="device-list">
	      <view class="device-item" v-for="(item,index) in deviceList" :key="index" @click="connectDevice(item.deviceId)">
	        <image src="/static/svg/jkey.svg"></image>
	        <view class="device-name">
	          <view>姐钥仪</view>
	          <view class="bat-status" v-if="(item.deviceId == BLEInfo.deviceId) && BLEInfo.status == 3">
	            <battery-display class="battery-box" :battery="BLEInfo.batteryValue"></battery-display>
	          {{BLEInfo.batteryValue}}%</view>
	          
	        </view>
	        <view class="connect-btn " v-show="delMode">
	          <view class="f-center" v-if="item.deviceId == BLEInfo.deviceId">
	            {{['未连接','连接中...','已连接'][BLEInfo.status - 1]}}
	          </view>
	          <view v-else class="f-center">
	            未连接
	          </view>
	        </view>
	        <view class="del-radio-box " v-if="delMode">
	          <label class="radio">
	            <checkbox :value="item.name" :checked="item.checked" @click="handleCheckChange(index)" />
	          </label>
	        </view>
	      </view>
	    </view>
	    <view class="f-center btn-box" v-if="!delMode">
	      <view class="jkey-btn-confirm my-btn" @click="toScanDevice">
	        添加设备
	      </view>
	    </view>
	    <view class="f-center btn-box" v-else>
	      <view class="jkey-btn-confirm my-btn" @click="delDevice" v-if="!delBtnDisabled">
	        删除
	      </view>
	      <view class="mask-cancel-btn my-btn f-center" v-else>
	        删除
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
	import {connectBLE, delDevice, queryBattery} from '/utils/bleController.js'
	export default {
		data() {
			return {
				deviceList:[],
				    connectDevice:1,
				    delMode:false,
				    delBtnDisabled:true,
				    BLEInfo:{}
			};
		},
		 onShow() {
		    let deviceList = uni.getStorageSync('historyDeviceList') || []
		    let BLEInfo = getApp().globalData.BLEInfo || {}
		    this.setData({
		      deviceList:deviceList.map(x=>{
		        return {
		          ...x,
		        checked:false
		        }
		      }),
		      BLEInfo
		    })
		    uni.openBluetoothAdapter()
		  },
		methods:{
			setData(obj){
				for(let i of Object.keys(obj)){
					this[i] = obj[i]
				}
			},
			connectDevice(deviceId){
			    if(this.delMode){
			      return
			    }
			    let BLEInfo = this.data.BLEInfo
			    if(deviceId == BLEInfo.deviceId && BLEInfo.deviceId !== 1){
			      return 
			    }
			    if(this.deviceList.some(x=>{
			      return x.deviceId == BLEInfo.deviceId && BLEInfo.status !== 1
			    })){
			      return uni.showToast({
			        title: '当前有设备连接中,请断开',
			        icon:'none'
			      })
			    }
			    this.setData({
			      BLEInfo:{
			        ...this.BLEInfo,
			        status:2,
			        deviceId
			      }
			    })
			    connectBLE(deviceId,(res)=>{
			      this.setData({
			        BLEInfo:{
			          ...this.BLEInfo,
			          serviceId:res,
			          status:3,
			          deviceId
			        }
			      })
			      getApp().globalData.BLEInfo = this.BLEInfo
			      queryBattery()
			    //   console.log(getApp().globalData.BLEInfo)
			    })
			    
			  },
			  toScanDevice(){
			    uni.navigateTo({
			      url: '/pages/scan-device/scan-device',
			    })
			  },
			  changeDelMode(){
			    if(!this.delMode && this.deviceList == 0){
			      return uni.showToast({
			        title: '当前没有设备',
			        icon:'none'
			      })
			    }
			    this.setData({
			      delMode:!this.delMode
			    })
			  },
			  delDevice(){
			    let deviceList = this.deviceList.filter(x=>!x.checked)
			    if(deviceList.length == 0){
			      this.setData({
			        delMode:false,
			        delBtnDisabled:true
			      })
			      uni.setStorageSync('historyDeviceList','')
			    }else{
			      uni.setStorageSync('historyDeviceList', deviceList.map(x=>{
			        return {
			          deviceId:x.deviceId
			        }
			      }))
			    }
			    this.setData({
			      deviceList
			    })
			   
			  },
			  handleCheckChange(index){
			    let deviceList = this.deviceList
			    deviceList[index].checked = !deviceList[index].checked
			    this.setData({
			      deviceList:deviceList,
			      delBtnDisabled:deviceList.filter(x=>x.checked).length == 0
			    })
			  },
		}
	}
</script>

<style lang="less">
/* pages/my-device/index.wxss */
/* pages/scan-device/index.wxss */
.page-container{
  background-color: #fbfbfb;
  height: 100%;
  padding-top: 0;
}


.scan-list-container{
  padding: 0 40rpx;
  
}
.scan-head{
  height: 44rpx;
  width: 100%;

  display: flex;
  align-items: center;
  
  font-size: 24rpx;
  color: rgba(54, 54, 54, 1);
}
.scan-head >view:first-child{
  width: 44rpx;
  height: 44rpx;
  border-radius: 44rpx;
  background: conic-gradient(from 90deg at 50% 50%, rgba(245, 115, 110, 1) 0%, rgba(255, 255, 255, 1) 100%);
  animation: rotate 2s infinite linear;
  margin-right: 26px;
}
.device-list{
  height: 60vh;
  overflow-y: auto;
  /* background-color: red; */
}

.device-item{
  position: relative;
  margin-bottom: 34rpx;
  width: 100%;
  height: 156rpx;
  background-color: #FFF3F1FF;
  display: flex;
  align-items: center;
  border-radius: 20rpx;
  padding: 0 40rpx 0 28rpx;
}
.device-item >image{
  width: 72rpx;
  height: 72rpx;
}
.device-name{
  margin-left: 24rpx;

}
.device-name >view:first-child{
  font-size: 36rpx;
  color: #262626;
}
.device-name .bat-status{
  font-size: 24rpx;
  display: flex;
}
.battery-box{
  transform: rotate(90deg);
  margin-left: 10rpx;
  margin-right: 30rpx;
}
.connect-btn{
  position: absolute;
  right: 40rpx;
  top: 50%;
  color:#F6736EFF;
  font-size: 28rpx;
  transform: translate(0,-50%);
}
.option-btn{
  padding: 20rpx 0 40rpx 0;
  text-align: right;
}
.my-btn{
  width: 360rpx;
  height: 80rpx;
  font-size: 40rpx;
}
.btn-box{
  margin-top: 60rpx;
}
.del-radio-box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}
.radio{
  position: absolute;
  right: 40rpx;
  top: 50%;
  transform: translate(0,-50%);
}

/* 未选中时--样式更改 */
checkbox .wx-checkbox-input{
  border-radius: 50%;/* 圆角 */
  width: 40rpx; /* 背景的宽 */
  height: 40rpx; /* 背景的高 */
  border: 1rpx solid #f5736e; /* 边框颜色*/
  background-color: #FFF3F1;
}
/* 选中后的--样式更改 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
  border: none;/*无边框*/
  background: #f5736e;/*背景色红色*/
}
/* 选中后的--对勾的样式更改 （可根据自己需求修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  border-radius: 50%;/* 圆角 */
  width: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
  height: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
  line-height: 40rpx;
  text-align: center;/* 文字居中显示*/
  font-size:30rpx; /* 对勾大小 30rpx */
  color:#fff; /* 对勾颜色 白色 */
  background: transparent;
  transform:translate(-50%, -50%) scale(1);
  -webkit-transform:translate(-50%, -50%) scale(1);
}
</style>
